<template>
    <div class="gold-shop-wrap">
        <van-nav-bar title="现金消费券" left-arrow fixed @click-left="onClickLeft" />
        <!-- <div class="subsidy_title">
            <div class="subsidy_title_list" v-for="item, index in titleList" :key="index"
                :class="{ 'active': current === index }" @click="setCurrent(index)">{{ item.name }}</div>
        </div> -->
        <div class="youhui_list_wrap">可使用现金消费券（单选）</div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div class="youhui_list" v-for="item, index in coupon_items" :key="index" :title="item" :style="{
                background: 'url(' + (youhui_bg == 1 ? require('../../../images/mine/youhui_bg.png') : require('../../../images/mine/youhui_bg1.png')) + ')',
                backgroundPosition: 'center',
                backgroundSize: 'cover'
            }">
                <van-radio-group v-model="youhui_radio" direction="horizontal">
                    <van-radio :name=item.id @click="handleclick(item.id, item.surplus_amount)"
                        checked-color="#ee0a24"></van-radio>
                </van-radio-group>
                <div class="youhui_list_left">
                    <div class="youhui_list_left_top">{{ item.title }}</div>
                    <div class="youhui_list_left_time">{{ item.valid_time }}</div>
                    <div class="youhui_list_left_tip">{{ item.rule }}</div>
                </div>
                <div class="youhui_list_right">
                    <div class="youhui_list_right_top" :style="{
                        color: youhui_bg === 1 ? 'rgba(255, 255, 255,1)' : 'rgba(255, 255, 255, .6)'
                    }">还剩</div>
                    <div class="youhui_list_right_price"><span>¥</span>{{ item.surplus_amount }}</div>
                    <div :style="{
                        color: youhui_bg === 1 ? 'rgba(243, 42, 35,1)' : 'rgba(243, 42, 35, .6)'
                    }" class="youhui_list_right_bottom">{{ item.status==0?'待使用':item.status==1?'使用中':item.status==2?'已使用':'已过期' }}</div>
                </div>

            </div>
        </van-list>
        <van-button round block type="info" @click="onSubmit" style="width: 90%;margin: 0.32rem auto;"
            color="linear-gradient(to right, #FF5851, #E9011B)">确定</van-button>
    </div>
</template>
<script>
import { Dialog } from 'vant';
import { SUBSIDY_LIST } from '@/api/mine'
export default {
    data() {
        return {
            loading: false,
            finished: false,
            youhui_bg: 1,
            active: 0,
            current: 0,
            youhui_radio: 0,
            titleList: [
                {
                    id: 0,
                    name: '待使用'
                },
                {
                    id: 1,
                    name: '已使用'
                }
            ],
            subsidyList: [],
            page: 1,
            pageSize: 20,
            tips: "",
            coupon_items: [],
            surplus_amount: "",
            radio: null
        }
    },
    created() {
        window.scrollTo(0, 0)
        this.coupon_items = JSON.parse(localStorage.getItem('coupon_items'))
        this.youhui_radio = Number(this.$route.query.coupon_id)
        this.radio=Number(this.$route.query.coupon_id)
    },
    methods: {
        onClickLeft() {
            this.youhui_radio = ''
            if (this.$route.query.goods == 1) {
                this.$router.replace({ path: '/order', query: { coupon_id: this.youhui_radio } })
            } else {
                let data = {
                    coupon_id: this.youhui_radio,
                    moneyInput: this.$route.query.moneyInput
                }
                localStorage.setItem("coupon", JSON.stringify(data))
                this.$router.replace({ path: '/store-pay?' + 'store_id=' + this.$route.query.store_id, query: { coupon_id: this.youhui_radio } })

            }
            // 
        },
        // 点击切换tab
        handleclick(e, val) {
            this.surplus_amount = val
            if (this.radio) {
                if (e === this.radio) {
                    this.youhui_radio = '';
                    this.radio=null
                } else {
                    this.radio = e;
                }
            } else {
                this.radio = e;
            }


        },
        resetInit() {
            this.page = 1;
            this.subsidyList = [];
            this.finished = false;
            this.loading = true;
            this.onLoad()
        },
        onLoad() {
            let params = {};
            params['page_num'] = this.page;
            params['page_size'] = this.pageSize;
            params['status'] = this.current;
            this.$http.get(SUBSIDY_LIST, { params: params })
                .then(res => {
                    const {
                        list
                    } = res.data;
                    this.tips = res.data.tip
                    if (list && list.length) {
                        this.page++;
                        this.subsidyList = this.subsidyList.concat(list);
                        // 加载状态结束
                        this.loading = false;
                        if (list.length < this.pageSize) {
                            this.finished = true;
                        }
                    } else {
                        this.finished = true;
                    }
                })
        },
        onSubmit() {
            if (!this.youhui_radio) {
                this.$toast('请选择优惠券')
            } else {
                if (this.$route.query.goods == 1) {
                    this.$router.replace({ path: '/order', query: { coupon_id: this.youhui_radio } })
                } else {
                    let data = {
                        coupon_id: this.youhui_radio,
                        moneyInput: this.$route.query.moneyInput,
                        surplus_amount: this.surplus_amount
                    }
                    localStorage.setItem("coupon", JSON.stringify(data))
                    this.$router.replace({ path: '/store-pay?' + 'store_id=' + this.$route.query.store_id, query: { coupon_id: this.youhui_radio } })
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
    min-height: 100vh;
    padding-top: 46px;
    background: #f5f5f5;

    ::v-deep .van-nav-bar .van-icon {
        color: #333333;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }
}

.youhui_list_wrap {
    width: 95%;
    margin: .2rem auto;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: .28rem;
    color: #333333;
    line-height: .4rem;
    // text-align: left;
    font-style: normal;

}

.subsidy_title {
    // width: 95%;
    margin: 0 auto;
    // margin-top: 0.3rem;
    display: flex;
    font-size: 0.28rem;
    padding: .24rem .24rem 0 .24rem;
    box-sizing: border-box;
    background-color: #fff;

    .subsidy_title_list {
        margin-right: 0.4rem;
        // font-size: 0.28rem;
        position: relative;
        color: #666666;
        padding-bottom: 0.24rem;
    }

    .subsidy_title_list.active {
        color: #F32A23;
        font-weight: 500;

        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px; // 横杠的高度，可以根据需要调整
            background-color: #F32A23; // 红色横杠
        }

        /* 选中时黑色 */
    }
}

.youhui_list {
    width: 95%;
    height: 2.14rem;
    margin: .2rem auto;
    background: url("../../../images/mine/youhui_bg.png");
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: space-between;
    padding: .2rem;
    box-sizing: border-box;

    .youhui_list_left {
        width: 58%;

        .youhui_list_left_top {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: .32rem;
            color: #333333;
            line-height: .44rem;
            text-align: left;
            font-style: normal;
        }

        .youhui_list_left_time {
            margin-top: .12rem;

            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: .24rem;
            color: #FF6200;
            line-height: .34rem;
            text-align: left;
            font-style: normal;
        }

        .youhui_list_left_tip {
            margin-top: .12rem;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: .22rem;
            color: #999999;
            line-height: .32rem;
            text-align: left;
            font-style: normal;
        }
    }

    .youhui_list_right {
        width: 30%;
        color: #fff;

        .youhui_list_right_top {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: .24rem;
            color: #FFFFFF;
            line-height: .34rem;
            text-align: left;
            font-style: normal;
        }

        .youhui_list_right_price {
            font-family: DINAlternate, DINAlternate;
            font-weight: bold;
            font-size: .32rem;
            color: #FFFFFF;
            line-height: .58rem;
            text-align: center;
            font-style: normal;
            margin-top: .04rem;

            span {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: .28rem;
                color: #FFFFFF;
                line-height: .4rem;
                // text-align: center;
                font-style: normal;
                margin-right: .1rem;
            }
        }

        .youhui_list_right_bottom {

            width: 56px;
            height: .4rem;
            margin: 0 auto;
            margin-top: .2rem;
            background: #FFFFFF;
            border-radius: 11px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: .24rem;
            color: #F32A23;
            line-height: .4rem;
            text-align: center;
            font-style: normal;
        }
    }
}
</style>
